<script setup lang="ts">
/**
 * @name ShiftSchedulingScheme
 * @description 排班方案
 */
import type { Action } from 'element-plus'
import SearchForm from './components/SearchForm.vue'
import ListCard from './components/ListCard.vue'

import PickShiftUnitModal from './components/ShiftSchedulingSchemeModal/PickShiftUnitModal.vue'
import PickTeamModal from './components/ShiftSchedulingSchemeModal/PickTeamModal.vue'
import ShiftSchedulingPlanModal from './components/ShiftSchedulingPlanModal/ShiftSchedulingPlanModal.vue'
import { useScheduleSchemeLists } from '@/mixins/TeamManagement/MixinScheduleSchemeLists'

import type {
  ScheduleScheme,
  ShiftUnit,
} from '@/types'
import { schedulingApi } from '@/api'

const searchFormRef
  = ref<InstanceType<typeof SearchForm>>()
const modal1Ref
  = ref<InstanceType<typeof PickShiftUnitModal>>()
const modal2Ref = ref<InstanceType<typeof PickTeamModal>>()
const shiftSchedulingPlanModalRef
  = ref<InstanceType<typeof ShiftSchedulingPlanModal>>()

const { loading, pagination, lists, setLists, getLists }
  = useScheduleSchemeLists()

const [scheduleScheme, setScheduleScheme] = useShallowState<
  Pick<
    ScheduleScheme,
    'id' | 'name' | 'shiftUnit' | 'shift' | 'team'
  >
>({
  id: 0,
  name: '',
  shiftUnit: {
    id: 0,
    name: '',
  },
  shift: [],
  team: [],
})

const modalInfo = ref<{
  scheduleSchemeId?: ScheduleScheme['id']
  scheduleSchemeName: ScheduleScheme['name']
  shiftUnitId: ShiftUnit['id']
  shiftUnitName: ShiftUnit['name']
  shiftUnitDetails: ShiftUnit['details']
  teams: ScheduleScheme['team']
}>({
  scheduleSchemeId: undefined,
  scheduleSchemeName: '',
  shiftUnitId: 0,
  shiftUnitName: '',
  shiftUnitDetails: [],
  teams: [],
})

function queryLists() {
  const {
    scheduleSchemeName: schedulingSchemeName,
    shiftUnitName,
    teamName,
  } = searchFormRef.value?.query || {}

  getLists({
    schedulingSchemeName,
    shiftUnitName,
    teamName,
  })
}
function clickSearch() {
  pagination.pageNumber = 1
  queryLists()
}

function clickAdd() {
  modalInfo.value = {
    scheduleSchemeId: undefined,
    scheduleSchemeName: '',
    shiftUnitId: 0,
    shiftUnitName: '',
    shiftUnitDetails: [],
    teams: [],
  }
  modal1Ref.value?.open()
}
function clickEdit(row: ScheduleScheme) {
  modalInfo.value = {
    scheduleSchemeId: row.id,
    scheduleSchemeName: row.name,
    shiftUnitId: row.shiftUnit.id,
    shiftUnitName: row.shiftUnit.name,
    shiftUnitDetails: row.shift,
    teams: row.team,
  }
  modal1Ref.value?.open()
}

async function clickDelete(row: ScheduleScheme) {
  if (row.id) {
    const res: Action = await ElMessageBox.confirm(
      '确定要删除这个排班方案吗？',
      '操作提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      },
    ).catch(e => e)

    if (res !== 'confirm')
      return

    try {
      await schedulingApi.deleteSchedulingSchemeById(
        row.id,
      )
      setLists(lists.value.filter(v => v.id !== row.id))
      ElMessage.success('删除成功')
      await nextTick()
      queryLists()
    }
    catch (e) {}
  }
}
function clickGenerate(row: ScheduleScheme) {
  setScheduleScheme({
    id: row.id,
    name: row.name,
    shiftUnit: row.shiftUnit,
    shift: row.shift,
    team: row.team,
  })
  shiftSchedulingPlanModalRef.value?.open()
}

function toNext() {
  modal2Ref.value?.open()
}

function toPrev() {
  modal1Ref.value?.open()
}

onMounted(() => {
  queryLists()
})
</script>

<template>
  <div
    class="padding-sm flex-direction flex align-end container"
  >
    <SearchForm
      ref="searchFormRef"
      style="align-self: flex-start"
      @search="clickSearch"
      @add="clickAdd"
    />
    <div v-loading="loading" element-loading-custom-class="global-loading" class="lists-wrap">
      <div v-if="lists.length > 0" class="clearfix lists">
        <ListCard
          v-for="item in lists"
          :key="item.id"
          :data="item"
          class="list-card"
          @edit="clickEdit"
          @delete="clickDelete"
          @generate="clickGenerate"
        />
      </div>
      <div
        v-else
        class="lists margin-top-xl"
        style="justify-content: center"
      >
        <TableEmpty />
      </div>
    </div>
    <ListsPagination
      v-model:page-num="pagination.pageNumber"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="queryLists"
      @size-change="queryLists"
    />

    <!-- 第一步：选择班次单元 -->
    <PickShiftUnitModal
      ref="modal1Ref"
      v-model="modalInfo"
      @to-next="toNext"
    />

    <!-- 第二步：选择班组 -->
    <PickTeamModal
      ref="modal2Ref"
      v-model="modalInfo"
      @to-prev="toPrev"
      @save-success="queryLists"
    />

    <!-- 生成计划弹框 -->
    <ShiftSchedulingPlanModal
      ref="shiftSchedulingPlanModalRef"
      :data="scheduleScheme"
    />
  </div>
</template>

<style lang="scss" scoped>
.lists-wrap {
  flex: 1;
  width: 100%;
  @include roll();
}
.lists {
  display: flex;
  flex-wrap: wrap;
}
.list-card {
  box-sizing: border-box;
  width: calc((100% - 50px) / 3);
  margin-right: calc(50px / 2);
  margin-bottom: calc(50px / 2);
  transition: all .3s;
}
.list-card:nth-child(3n) {
  margin-right: 0;
}
@media screen and (max-width: 1400px) {
  .list-card {
    flex-basis: calc((100% - 20px) / 2);
    margin-right: calc(20px / 1);
  }
  .list-card:nth-child(2n) {
    margin-right: 0;
  }
}
</style>
